import { observable } from "mobx";
import { observer } from "mobx-react";
import {
  Button,
  Table,
  Modal,
  Input,
  Typography,
  Space,
  Spin,
  message,
} from "antd";
import { PlusOutlined, ReloadOutlined } from "@ant-design/icons";
import IconFont from "../../../../assets/ICON";
import * as React from "react";
import moment from "moment";
import {
  AjaxData,
  columnsDataCLass,
} from "../../../../data/interface/publicInterface";
import { selectProjectList, reSetProjPassword } from "../ServeApi";
import AddModal from "./compontents/AddModal";
import EditModal from "./compontents/EditModal";
const { Text } = Typography;
const { Search } = Input;
export interface ProjectControllerProps {}

export interface ProjectControllerState {
  loading: boolean;
  visible: boolean;
  editvisible: boolean;
  searTxt: string;
}
@observer
class ProjectController extends React.Component<
  ProjectControllerProps,
  ProjectControllerState
> {
  @observable private columns: columnsDataCLass[] = [
    {
      title: "项目名称",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "默认用户",
      dataIndex: "userName",
      key: "userName",
    },
    {
      title: "简称",
      dataIndex: "subName",
      key: "subName",
    },
    {
      title: "授权日期",
      dataIndex: "authDate",
      key: "authDate",
      render: (text: string) => {
        let str: string = "";
        if (text) {
          str = moment(text).format("YYYY-MM-DD");
        } else {
          str = "";
        }
        return str;
      },
    },
    {
      title: "创建用户",
      dataIndex: "createBy",
      key: "createBy",
    },
    {
      title: "创建时间",
      dataIndex: "createTime",
      key: "createTime",
      render: (text: string) => {
        let str: string = "";
        if (text) {
          str = moment(text).format("YYYY-MM-DD");
        } else {
          str = "";
        }
        return str;
      },
    },
    {
      title: "操作",
      dataIndex: "action",
      key: "action",
      render: (text, record) => {
        return (
          <Space size={26}>
            <span
              style={{ color: "#595959", cursor: "pointer" }}
              onClick={() => {
                // this.Mod = "updata";
                this.onEdit(record);
              }}
            >
              <IconFont type="icon_form_bianji" style={{ color: "#FBB10B" }} />
              <Text>编辑</Text>
            </span>
            <span
              style={{ color: "#595959", cursor: "pointer" }}
              onClick={() => {
                this.onResetPwd(record);
              }}
            >
              <ReloadOutlined style={{ color: "#FF6B6B" }} />

              <Text>重置密码</Text>
            </span>
          </Space>
        );
      },
    },
  ];
  private initvalue: any = {};
  private dataSouce: any[] = [];
  private pageIndex: number = 1;
  private pageSize: number = 20;
  private total: number = 0;
  state = {
    loading: false,
    visible: false,
    editvisible: false,
    searTxt: "",
  };
  /**钩子函数 */
  componentWillMount() {
    this.selectProjectList();
  }
  /**操作 */
  //编辑
  onEdit(record: any) {
    this.initvalue = record;
    this.setState({ editvisible: true });
  }
  //搜索
  onSearch() {
    this.pageIndex = 1;
    this.total = 0;
    this.selectProjectList();
  }
  //重置密码
  onResetPwd(record: any) {
    let _this = this;
    Modal.confirm({
      title: "是否确定重置" + record.name + "的密码",
      onOk: () => {
        _this.reSetProjPassword(record.id);
      },
    });
  }
  /**数据查询 */
  //重置密码
  async reSetProjPassword(id: string) {
    try {
      let pream: { id: string } = { id };
      let res: any = await reSetProjPassword(JSON.stringify(pream));
      let json: AjaxData = res;
      if (json.success) {
      }
    } catch (error) {
      message.error("重置密码失败");
    }
  }
  //项目列表分页查询
  async selectProjectList() {
    let pream = {
      pageIndex: this.pageIndex,
      pageSize: this.pageSize,
      queryData: { name: this.state.searTxt },
    };
    try {
      this.setState({ loading: true });
      let res: any = await selectProjectList(JSON.stringify(pream));
      let json: AjaxData = res;
      if (json.success) {
        this.dataSouce = json.data.records;
        this.total = json.data.total;
        this.setState({ loading: false });
        this.forceUpdate();
      }
    } catch (error) {
      this.setState({ loading: false });
      Modal.error({
        title: `初始化项目列表失败，无法读取项目文件，请刷新页面。`,
      });
    }
  }
  render() {
    return (
      <div className="rowcon_body">
        <div>
          <Button
            type="primary"
            icon={<PlusOutlined />}
            onClick={() => {
              this.setState({ visible: true });
            }}
          >
            新增
          </Button>
          <Search
            placeholder="请输入项目名称"
            value={this.state.searTxt}
            onChange={(e: any) => {
              this.setState({ searTxt: e.target.value });
            }}
            onSearch={(str: string) => {
              this.onSearch();
              // console.log(str);
            }}
            style={{ width: 200, float: "right" }}
          />
        </div>
        <div className="rowcon_bottom"></div>
        <Spin spinning={this.state.loading}>
          <Table
            columns={this.columns}
            dataSource={this.dataSouce}
            pagination={{
              pageSize: this.pageSize,
              total: this.total,
              current: this.pageIndex,
              onChange: (page: number) => {
                this.pageIndex = page;
                this.selectProjectList();
              },
            }}
          ></Table>
        </Spin>
        <AddModal
          visible={this.state.visible}
          onOk={() => {
            this.setState({ visible: false });
            this.selectProjectList();
          }}
          onCancel={() => {
            this.setState({ visible: false });
          }}
        ></AddModal>
        <EditModal
          visible={this.state.editvisible}
          value={this.initvalue}
          onOk={() => {
            this.setState({ editvisible: false });
            this.selectProjectList();
          }}
          onCancel={() => {
            this.setState({ editvisible: false });
          }}
        ></EditModal>
      </div>
    );
  }
}

export default ProjectController;
